  
<html>

    <head>
        <meta charset="utf-8">
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            button {
                display: inline-block
            }
        </style>
    </head>
    
    <body>
        <div id="output" style="height: 400px; width: 600px; background: #eee">
        </div>
        <button id="rock" style="height: 40px; width: 80px">石头</button>
        <button id="scissor" style="height: 40px; width: 80px">剪刀</button>
        <button id="paper" style="height: 40px; width: 80px">布</button>
    </body>
    <script>
        const $button = {
            rock: document.getElementById('rock'),
            scissor: document.getElementById('scissor'),
            paper: document.getElementById('paper')
        }
    
        const $output = document.getElementById('output')
    
        Object.keys($button).forEach(key => {
            $button[key].addEventListener('click', function () {
                fetch(`http://${location.host}/game?action=${key}`)
                    .then((res) => {
                        return res.text()
                    })
                    .then((text) => {
                        $output.innerHTML += text + '<br/>';
                    })
            })
        })
    </script>
    
    </html>